<template>
  <div class="common-layout">
    <el-container>

      <el-header>
          <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item>分类</el-breadcrumb-item>
            <el-breadcrumb-item>
              <el-text class="mx-1" type="primary">{{ categoryTitle }}</el-text>
            </el-breadcrumb-item>
          </el-breadcrumb>
      </el-header>

      <el-main>
        <ul class="new-book-b" v-if="categoryList.length != 0">
          <li
            v-for="(item) in categoryList" 
            :key="item.book_id" 
            @click="gotoDetails(item.book_id)"
          >
            <img :src="item.photo || default_src">
            <div class='book-content'>
              <h3>{{ item.book_name }}</h3>
              <div class="author">{{ item.author }}</div>
              <div class="publisher">{{ item.publisher }}</div>
              <div class='price'>
                <div class='price-vip'> {{ categoryTitle }} </div>
                <div class='price-total'>¥ {{ item.price }} </div>
              </div> 
            </div>
            <span v-show="!item.statuss" class="notListed">未上架</span>
          </li>
        </ul>
        <el-empty v-else :image-size="200">
          <template #default>
            该分类暂时没有数据哦...
          </template>
        </el-empty>
      </el-main>

    </el-container>
  </div>
</template>

<script setup>
import { toRefs } from "vue"
import { ArrowRight } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter();

const props = defineProps({
  categoryTitle: {
    type: String,
    default: ''
  },
  categoryList: {
    type: Array,
    default: []
  }
})

const { categoryTitle, categoryList } = toRefs(props);

// 去详情页
const gotoDetails = id => {
  router.push({
    path: `/details`,
    // 显式传参
    query: { 
      book_id: id
    }
  })
}

</script>

<style scoped lang="less">
.common-layout{
  width: 100%;
  height: 100%;
  .el-container{
    width: 80%;
    margin: 0 auto;
    .el-header{
      padding-top: 35px;
      margin-top: 20px;
      background: #efefef;
    }
    .el-main{
      border: 1px solid #efefef;  
    }
  }
 
}

.new-book-b{
  display: flex;
  flex-wrap: wrap;
  height: 780px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  
}
.new-book-b li{
  width: 240px;
	height: 350px;
  margin-top: 38px;
  margin-right: 10px;
	background: #FFFFFF;
	box-shadow: 1px 3px 3px rgba(27, 39, 94, 0.1);
	border-radius: 5px;
  transition: .45s;
  position: relative;
}
.new-book-b li:hover{
  cursor: pointer;
  transform: translateY(-30px);
}
.new-book-b li img{
  width: 240px;
  height: 220px;
}
.new-book-b .book-content{
  padding: 7px 16px;
  .author{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis; /* 文字溢出省略号 */
    white-space: nowrap; /* 不换行 */
  }
}
.new-book-b .book-content h3{
  font-size: 12px;
	color: #333333;
}
.book-content > div{
  padding: 7px 0;
  font-size: 12px;
	color: #808080;
}
.price{
  display: flex;
}
.price-vip{
  background: linear-gradient(90deg, #FF928E 0%, #FE7062 99%);
	border-radius: 16px 0px 16px 0px;
  text-align: center;
  color:#fff;
  width: 64px;
	height: 16px;
  margin-right: 3px;
}
.price-total{
  font-size: 12px;
	color: #FF727F;
}

.notListed{
  border:1px solid #000;
  padding: 5px;
  position: absolute;
  font-size: 35px;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%) rotate(-30deg);
  color: #fff;
  background: rgba(29,29,31,0.72);
  backdrop-filter: saturate(180%) blur(20px);
}

</style>